<template>

  <div class="account-pos">
    <!--    添加菜品-->
    <form class="form-inline">
      <!--      @submit.prevent="onFormSubmit"-->
      <div class="input-group mb-2 mr-sm-2">
        <!-- 输入框的前缀 -->
        <div class="input-group-prepend">
          <div class="input-group-text">账户号</div>
        </div>
        <!-- 文本输入框 -->
        <input type="text" class="form-control" placeholder="输入账户号" style="width: 356px;" v-model.trim="InputAccount.accountNumber" />
        <div class="input-group-prepend">
          <div class="input-group-text">密码</div>
        </div>
        <input type="text" class="form-control" placeholder="输入密码" style="width: 356px;" v-model.trim="InputAccount.password" />
        <div class="input-group-prepend">
          <div class="input-group-text">账户类型</div>
        </div>
        <select class="form-control" id="exampleFormControlSelect1" v-model="InputAccount.type">
          <option value="支付宝">支付宝</option>
          <option value="微信">微信</option>
          <option value="银行卡">银行卡</option>
        </select>
      </div>
      <!-- 添加按钮 -->
      <button type="submit" class="btn btn-primary mb-2" @click.prevent="insertAccount()">添加账户</button>

    </form>

  </div>


  <div>
    <table class="table">
      <thead>
      <tr>

        <th scope="col">#</th>
        <th scope="col">accountNumber</th>
        <th scope="col">currentMoney</th>
        <th scope="col">type</th>

      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in AccountList" :key="item.accountNumber">
        <th scope="row">{{++index}}</th>
        <td>
          <input class="btn btn-primary" :placeholder="item.accountNumber" v-model="item.accountNumber" style="width: 150px" readonly>
        </td>
        <td>
          <input class="btn btn-primary" :placeholder="item.currentMoney" v-model="item.currentMoney" readonly>
        </td>
        <td>
          <input class="btn btn-primary" :placeholder="item.type" v-model="item.type" style="width: 500px" readonly>
        </td>
        <td><button type="submit" class="btn btn-primary mb-2" style="background-color: red;border: none" @click.prevent="deleteAccount(item)">删除</button></td>
      </tr>

      </tbody>
    </table>
  </div>


</template>

<script>
export default {
  name: 'Account',

  data() {
    return {
      InputAccount: {
        accountNumber: "",
        password: "",
        type: "",
        customerPhoneNumber: "",
      },

      AccountList:[],

    }
  },

  methods: {
    async getAccount() {
      const {data: res} = await this.$http.get('/account/accountList?phoneNumber='+localStorage.getItem("username_C"))
      this.AccountList=res.data
    },

    async insertAccount() {
      this.InputAccount.customerPhoneNumber=localStorage.getItem("username_C")
      const {data: res} = await this.$http.post('/account/insertAccount',this.InputAccount)
      await this.getAccount()
    },

    async deleteAccount(item) {
      const {data: res} = await this.$http.get('/account/delete?accountNumber='+item.accountNumber
          +'&phoneNumber='+localStorage.getItem("username_C"))
      await this.getAccount()
    }

  },

  created() {
    this.getAccount();
  }

}
</script>

<style lang="less" scoped>
.account-pos{
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  border: 50px solid white;

}
</style>
